/* @font-face {
    font-family: 'Cairo';
    src: url('/css/cairo/static/Cairo-Regular.ttf') format('truetype');
} */
/* body{
    font-family: 'Cairo', sans-serif;
} */

body{
    font-family: 'Al Jazeera Arabic';
}

.theme-transition {
    transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
}

:root {
    --purple-main: #6c5ce7;
    --purple-light: #a29bfe;
    --purple-dark: #4834d4;
    --purple-muted: #5f27cd;
    --purple-hover: #7d5fff;
    --purple-disabled: #686de0;
}
/* Text Colors */
.text-purple { color: var(--purple-main) !important; }
.text-purple-light { color: var(--purple-light) !important; }
.text-purple-dark { color: var(--purple-dark) !important; }
.text-purple-muted { color: var(--purple-muted) !important; }
.text-purple-hover:hover { color: var(--purple-hover) !important; }
.text-purple-disabled { color: var(--purple-disabled) !important; }

/* Background Colors */
.bg-purple { background-color: var(--purple-main) !important; }
.bg-purple-light { background-color: var(--purple-light) !important; }
.bg-purple-dark { background-color: var(--purple-dark) !important; }
.bg-purple-muted { background-color: var(--purple-muted) !important; }
.bg-purple-hover:hover { background-color: var(--purple-hover) !important; }
.bg-purple-disabled { background-color: var(--purple-disabled) !important; }

/* Border Colors */
.border-purple { border-color: var(--purple-main) !important; }
.border-purple-light { border-color: var(--purple-light) !important; }
.border-purple-dark { border-color: var(--purple-dark) !important; }
.border-purple-muted { border-color: var(--purple-muted) !important; }
.border-purple-hover:hover { border-color: var(--purple-hover) !important; }
.border-purple-disabled { border-color: var(--purple-disabled) !important; }

/* Button Colors */
.btn-purple {
color: #fff;
background-color: var(--purple-main);
border-color: var(--purple-main);
}

.btn-purple:hover {
color: #fff;
background-color: var(--purple-hover);
border-color: var(--purple-hover);
}

.btn-purple:disabled,
.btn-purple.disabled {
color: #fff;
background-color: var(--purple-disabled);
border-color: var(--purple-disabled);
}

.btn-purple-gradient {
    color: #fff;
    background: linear-gradient(45deg, var(--purple-main), var(--purple-hover)); /* gradient background */
    border: 1px solid transparent; /* optional for border consistency */
    transition: background 0.3s ease; /* smooth transition for the background */
}

.btn-purple-gradient:hover {
    color: #fff;
    background: linear-gradient(45deg, var(--purple-hover), var(--purple-main)); /* reverse gradient on hover */
    border: 1px solid transparent; /* optional */
}

.btn-purple-gradient:disabled,
.btn-purple-gradient.disabled {
    color: #fff;
    background: linear-gradient(45deg, var(--purple-disabled), var(--purple-disabled)); /* single color gradient for disabled state */
    border: 1px solid transparent; /* optional */
}

/* Outline Button Styles */
.btn-outline-purple {
    color: var(--purple-main);
    border: 1px solid var(--purple-main);
    background-color: transparent;
}

.btn-outline-purple:hover {
    color: #fff;
    background-color: var(--purple-main);
    border-color: var(--purple-main);
}

.btn-outline-purple:focus,
.btn-outline-purple.focus {
    color: #fff;
    background-color: var(--purple-main);
    border-color: var(--purple-main);
    box-shadow: 0 0 0 0.2rem rgba(108, 92, 231, 0.5);
}

.btn-outline-purple.disabled,
.btn-outline-purple:disabled {
    color: var(--purple-disabled);
    background-color: transparent;
    border-color: var(--purple-disabled);
}

.btn-outline-purple:active,
.btn-outline-purple.active,
.show > .btn-outline-purple.dropdown-toggle {
    color: #fff;
    background-color: var(--purple-dark);
    border-color: var(--purple-dark);
}

.btn-outline-purple:active:focus,
.btn-outline-purple.active:focus {
    box-shadow: 0 0 0 0.2rem rgba(72, 52, 212, 0.5);
}

/* Gradient Backgrounds */
.bg-purple-gradient {
    background: linear-gradient(45deg, var(--purple-main), var(--purple-light)) !important;
}

.bg-purple-gradient-hover:hover {
    background: linear-gradient(45deg, var(--purple-hover), var(--purple-light)) !important;
}

/* Utility Opacity */
.opacity-purple { opacity: 0.75; }
.opacity-purple-hover:hover { opacity: 1; }

/* Link Colors */
.link-purple { color: var(--purple-main) !important; }
.link-purple:hover { color: var(--purple-hover) !important; }

.form-floating>.form-control-plaintext~label::after, .form-floating>.form-control:focus~label::after, .form-floating>.form-control:not(:placeholder-shown)~label::after, .form-floating>.form-select~label::after{
    background-color: transparent;
}